<template>
  <div>
    <div style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">体育场馆在线售票管理信息系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-left:20px; padding-right: 10px; display: flex; align-items: center;">
        <span style="margin-left: 5px">用户名：{{user.name}} | 身份：{{user.role}}</span>
      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu
            router
            style="border: none"
            :default-active="$route.path"
            :default-openeds="['/home', '2','3', '4']"
        >
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/userManager" v-if="user.role === '管理员'">
              <el-icon><UserFilled /></el-icon>
              <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="/gymManager" >
            <el-icon><Document /></el-icon>
            <span>体育场馆信息</span>
          </el-menu-item>
          <el-menu-item index="/gameInfoManager" >
          <el-icon><Document /></el-icon>
          <span>赛事信息</span>
          </el-menu-item>
          <el-menu-item index="/ticketManager" >
            <el-icon><Document /></el-icon>
            <span>售票信息</span>
          </el-menu-item>
          <el-menu-item index="/ticketRecordManager" >
            <el-icon><Document /></el-icon>
            <span>购票记录</span>
          </el-menu-item>
          <el-menu-item index="/liuYanManager" >
            <el-icon><Upload /></el-icon>
            <span>留言框</span>
          </el-menu-item>
          <el-menu-item index="/person">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <!--文件上传-->

          <el-menu-item index="login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view />
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
const $route = useRoute()
const user = JSON.parse(localStorage.getItem('student-user')||'{}')
const logout = () => {
  localStorage.removeItem('student-user')
  // this.$router.push('/login')
  localStorage.removeItem('token')
}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #dcede9 !important;
}
.el-menu-item:hover {
  color: #11A983;
}
:deep(th)  {
  color: #333;
}
</style>

<script>

  export default {

  data() {

  return {

  currentDateTime: new Date()

}

},

  computed: {

  formattedDateTime() {

  // 使用 toLocaleString 来格式化日期和时间

  // 你可以根据需要调整选项

  return this.currentDateTime.toLocaleString('zh-CN', {

  year: 'numeric',

  month: '2-digit',

  day: '2-digit',

  hour: '2-digit',

  minute: '2-digit',

  second: '2-digit',

  hour12: false // 使用 24 小时制

});

}

},

  watch: {

  // 监听 currentDateTime 的变化，并在变化时更新 formattedDateTime

  currentDateTime(newVal) {

  this.formattedDateTime = newVal.toLocaleString('zh-CN', {

  year: 'numeric',

  month: '2-digit',

  day: '2-digit',

  hour: '2-digit',

  minute: '2-digit',

  second: '2-digit',

  hour12: false

});

}

},

  mounted() {

  // 设置定时器每秒更新日期和时间

  setInterval(() => {

  this.currentDateTime = new Date();

}, 1000);

}

}

</script>
